<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item class="el-icon-s-tools">系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>


        <!------------------------这是搜索框--------------------------------------------->
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input placeholder="请输入内容" v-model="query.name" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" @click="this.getRoles"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="6" v-has-permission="'sys:role:add'">
                    <el-button type="success"  round @click="dialogVisible = true" >新增角色</el-button>
                </el-col>
            </el-row>
        </el-card>

        <!------------------------------------表格------------------------------------------->
        <el-table :data="roles" style="width: 100%" stripe>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="remark" label="职位" width="180"></el-table-column>
            <el-table-column  label="是否停用" width="180">
                <template scope="item">
                    <el-switch v-model="item.row.isstop" @change="changeStatus(item.row)">
                    </el-switch>
                </template>
            </el-table-column>


            <!-------------------------------------具体的操作-------------------------------------->
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button  @click="updateRole(scope.row)" type="warning" v-has-permission="'sys:role:update'" size="small">修改</el-button>
                    <el-button  @click="deleteRole(scope.row)" type="danger" v-has-permission="'sys:role:delete'" size="small">删除</el-button>
                    <el-button  @click="assignRes(scope.row)" type="primary" v-has-permission="'sys:role:assign'" size="small">分配资源</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!---------------------分页------------------------------------------------------>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="query.page"
                    :page-sizes="[5, 20, 30, 40]"
                    :page-size="query.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!------------------------------------新增角色输入dialog---------------------------->
        <el-dialog
                title="新增角色"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">

            <div style="margin: 20px;"></div>
            <el-form label="right" label-width="80px" :model="formLabelAlign">
                <el-form-item label="名称">
                    <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="是否禁用" prop="delivery">
                    <el-switch v-model="formLabelAlign.isstop"></el-switch>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="formLabelAlign.remark"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSave">确 定</el-button>
            </span>
        </el-dialog>

        <!-------------------删除------------------------------------------>
        <template>
            <el-button type="text" @click="deleteRole"></el-button>
        </template>

        <!------------------------------------修改------------------------->
        <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-form label="right" label-width="80px" :model="formLabelAlign">
                <el-form-item label="名称">
                    <el-input v-model="formLabelAlign.name" readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="是否禁用" prop="delivery">
                    <el-switch v-model="formLabelAlign.isstop"></el-switch>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="formLabelAlign.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="restUpdate">取 消</el-button>
            <el-button type="primary" @click="updateSave">确 定</el-button>
            </span>
        </el-dialog>


        <!-------------------------------资源分配------------------------------------->
        <el-dialog title="资源分配"
                   :visible.sync="resDialogVisible"
                   width="50%" @close="closeResDialog">
            <el-tree
                    :data="ress"
                    show-checkbox
                    node-key="id"
                    :default-checked-keys="premssions"
                    ref="tree"
                    :props="defaultProps">
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-button @click="resDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveRoleRes">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import {getData,postData,deleteData,putData} from "../../api";

    export default {
        mounted() {
            this.getRoles();
            this.getRess();
        },

        methods: {
            async saveRoleRes() {
                const roleRes = [...this.$refs.tree.getCheckedKeys(), ...this.$refs.tree.getHalfCheckedKeys()]
                    .map(resid => {
                        return {
                            roleId: this.roleId,
                            resourcesId: resid
                        }
                    })
                const res = await postData('/sys/roleResources/' + this.roleId, roleRes)
                if (res.code === SUCCESS_CODE) {
                    this.resDialogVisible = false;
                    this.$message.success(res.msg);
                } else {
                    this.$message.success(res.msg);
                }
            },

            closeResDialog(){
                this.$refs.tree.setCheckedKeys([]);
            },

            async getRess(){
                const res = await getData('/sys/resources/prems')
                if(res.code===SUCCESS_CODE){
                    this.ress=res.data;
                }
            },

            async assignRes(roleInfo) {
                this.roleId=roleInfo.id;
                this.resDialogVisible = true;
                const res = await getData('/sys/resources/'+roleInfo.id)
                if(res.code===SUCCESS_CODE){
                    this.premssions=res.data
                }
            },

            async changeStatus(roleInfo) {
                let msg='停用'
                if(roleInfo.isstop){
                    msg='启用'
                }
                this.$confirm('您要'+msg+'此状态', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await putData('sys/role/'+roleInfo.id+'/'+roleInfo.isstop)
                    if (res.code === 20000) {
                        this.$message.success(res.msg);

                    }else{
                        this.$message.error(res.msg);
                    }
                }).catch(() => {
                    roleInfo.isstop=!roleInfo.isstop;
                });

            },

            async updateSave() {
                const res = await putData('sys/role/'+this.formLabelAlign.id, this.formLabelAlign)
                if (res.code === 20000) {
                    this.$message.success(res.msg);
                    this.getRoles();
                    this.formLabelAlign={};
                    this.editDialogVisible=false;

                }else{
                    this.$message.error(res.msg);
                }
            },

            updateRole(roleInfo) {
                this.editDialogVisible = true;
                this.formLabelAlign = JSON.parse(JSON.stringify(roleInfo));
            },

            restUpdate(){
                this.formLabelAlign={};
                this.editDialogVisible = false;
            },

            deleteRole (roleInfo){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res=await deleteData('sys/role/'+roleInfo.id);
                    if(res.code===20000){
                        this.$message.success(res.msg)
                        await this.getRoles();
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            async addSave() {
                const res = await postData('sys/role', this.formLabelAlign)
                if (res.code === 20000) {
                    this.$message.success(res.msg);
                    await this.getRoles();
                    this.dialogVisible=false;
                    this.formLabelAlign={};
                }else{
                    this.$message(res.msg);
                    this.formLabelAlign={};
                }
            },

            async getRoles() {
                const res = await getData('/sys/role', this.query);
                if (res.code === 20000) {
                    this.roles = res.data.data;
                    this.total=res.data.total;
                }
                console.log(res)
            },

            handleSizeChange(val) {
                this.query.size=val;
                this.getRoles();
            },

            handleCurrentChange(val) {
                this.query.page=val;
                this.getRoles();
            },

            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            }
        },

        data() {
            return {
                roleId:-1,
                premssions:[],
                resDialogVisible:false,
                editDialogVisible:false,
                dialogVisible: false,
                query: {
                    page: 1,
                    size: 5,
                    name: ""
                },
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4,
                roles: [],
                total:0,
                formLabelAlign:{},
                ress: [],
                defaultProps: {
                    children: 'children',
                    label: 'cname'
                }
            }
        }

    }
</script>

<style scoped>

</style>